<template>
  <a-card :bordered="false">
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :row-key="rowKey"
      :loading="loading"
      :pagination="pagination"
      @change="change"
    >
      <template v-if="header" #title>
        <r-h-table-header v-bind="header" />
      </template>
      <template v-if="footer" #footer>
        Footer
      </template>
    </a-table>
  </a-card>
</template>

<script lang="ts">
import * as request from '@/axios/axios'
import _ from 'lodash'
import RHTableHeader from '@/components/RHTable/Header/index.vue'
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'RHTable',
  components: { RHTableHeader },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    url: {
      type: String,
      default: null
    },
    method: {
      type: String,
      default: 'post'
    },
    param: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * false 不分页
     */
    paging: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 表头参数
     */
    header: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 页脚
     */
    footer: {
      type: Boolean || Object,
      default: () => {
        return {}
      }
    }

  },
  setup(props) {
    // 查询参数
    const queryParam:any = ref({})
    // 表格数据
    const dataSource:any = ref([])
    return {
      queryParam,
      dataSource
    }
  },
  data() {
    return {
      /**
       * 分页参数
       */
      pagination: {
        /**
         * 当前页
         */
        current: 1,
        /**
         * 每页梳理
         */
        pageSize: 10,
        /**
         * 默认每页数量
         */
        defaultPageSize: 10,
        /**
         *  只有一页隐藏
         */
        hideOnSinglePage: false,
        /**
         * 每有页数量显示
         */
        pageSizeOptions: ['10', '20', '30', '40'],
        /**
         *  是否允许快速跳转
         */
        showQuickJumper: true,
        /**
         * 是否可以改变 pageSize
         */
        showSizeChanger: true,

        total: 0,
        /**
         * 显示总数
         * @param total
         * @param range
         * @returns {*}
         */
        showTotal: (total:any, range:any) => {
          return `总数:  ${total}  `
        }
      },
      /**
       * 加载状态
       */
      loading: true,
      /**
       * 表头参数
       */
      headerParam: {
        buttons: []
      }
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.initTable()
    })
  },
  methods: {
    // 刷新表格
    refresh() {
      if (this.url) {
        request
          .requestAssign(this.url, this.queryParam, this.method)
          .then((response:any) => {
            if (response.state) {
              this.dataSource = response.data.list
              this.pagination.total = response.data.total
              this.pagination.pageSize = response.data.pageSize
              this.pagination.current = response.data.current
              this.loading = false
            }
          })
      }
    },
    /**
     * 分页  排序 自定义过滤条件
     * @param pagination
     * @param filters
     * @param sorter
     * @param currentDataSource
     */
    change(pagination:any, filters:any, sorter:any, { currentDataSource }:any) {
      console.log(pagination, filters, sorter, currentDataSource)
      this.queryParam['pageSize'] = pagination.pageSize
      this.queryParam['current'] = pagination.current
      this.queryParam = _.defaultsDeep(filters, this.queryParam)
      this.refresh()
    },
    /**
     * 初始化表格
     */
    async initTable() {
      this.queryParam = this.param
      this.dataSource = this.data
      if (this.pagination) {
        this.queryParam.pageSize = this.pagination.pageSize
        this.queryParam.pageNum = this.pagination.current
        this.pagination = _.defaultsDeep(this.paging, this.pagination)
      }
      this.refresh()
    }
  }
})
</script>

<style scoped></style>
